<template>
  <div class="input-tag-container">
    <div class=input-tag-body>
      <tag class="input-tag"></tag>
      <tag class="input-tag"></tag>
      <input class="input-tag-input">
    </div>
    <div style="suffix">
      <slot name="suffixIcon"></slot>
    </div>
  </div>
</template>

<script>
import tag from './tag'

export default {
  name: "inputTag",
  components:{
    tag
  },
  data() {
    return {
      inputString: "",
    };
  },
  methods:{
    outSide(){

    }
  }
};
</script>

<style scoped>
  .input-tag-container {
    display: block;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-top: 1.02px solid #d9d9d9;
    border-radius: 4px;
    user-select: none;
    padding-top: 3px;
  }

  .input-tag-body {
    margin: 0 24px 0 7px;
    display: inline-block;
  }

  .suffix {
    display: inline-block;
  }

  .input-tag-input {
    border:none !important;
    outline:none !important;
    margin-bottom: 3px;
  }

  .input-tag {
    margin-right: 6px;
    margin-bottom: 3px;
  }

  .input-tag:last-child {
    margin-bottom: 3px;
  }
</style>
